<template>
  <div class="bg-card header-container">
    <div class="container container-align-center gap-fourth">
      <img
        style="height: 30px"
        src="/logo.svg"
        alt="logo"
      >
      <span class="hidden-768">管理端</span>
    </div>
    <div class="container container-align-center gap">
      <div class="container container-align-center gap-half header-menu">
        <span
          v-for="item in menuStore.menuItems"
          :key="item.name"
          class="header-menu-item"
          :class="[
            {
              'active-primary': menuStore.selectedMenuItem === item.name,
              'hover-bottom-primary': menuStore.selectedMenuItem !== item.name,
            },
          ]"
          @click="itemClickHandler(item)"
        >
          {{ item.name }}
        </span>
      </div>
      <div class="container container-align-center gap-fourth">
        <QAvatar
          url="/figure.webp"
          size="30px"
        />
        <span>admin</span>
        <QThemeToggle :size="24" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { QAvatar, QThemeToggle } from 'qyani-components'
import router from '../route'
import { useMenuStore } from '../store'
import { watch } from 'vue';
defineOptions({
  name: 'HeaderNavigation',
})
const menuStore = useMenuStore();
const itemClickHandler = (item: { name: string; path: string }) => {
  menuStore.setSelectedMenuItem(item.name);
  router.replace(item.path)
}
watch(
  ()=>router.currentRoute.value,
  (newVal) => {
    for(let item of menuStore.menuItems){
      if(item.path === newVal.path){
        menuStore.setSelectedMenuItem(item.name);
      }
    }
  }
)
</script>
<style lang="css" scoped></style>
